import { selectRecord } from '@/services/api/api-publicity-record';
import { FileOutlined } from '@ant-design/icons';
import { DrawerForm } from '@ant-design/pro-form';
import ProList from '@ant-design/pro-list';
import { Avatar, Descriptions, Divider, Space, Spin, Tag, Typography } from 'antd';
import moment from 'moment';
import React, { useState } from 'react';
import { useAccess } from 'umi';

interface DetailsRecordProps {
  id: string;
  name: string;
  onRefurbish: () => void;
}

const DetailsRecord: React.FC<DetailsRecordProps> = ({ id, name, onRefurbish }) => {
  const access = useAccess();

  const [details, setDetailsState] = useState<PublicityRecordData.RecordDetails>();

  /**
   * 获取 详情
   * @param key
   */
  const getRecordDetails = async () => {
    try {
      const response = await selectRecord({ id });
      if (response.code === 0) {
        setDetailsState(response.data);
      }
    } catch (error) { }
  };

  return (
    <DrawerForm
      key="details_record_drawer_form"
      title={
        details !== undefined && (
          <>
            <Tag color={details?.state === 1 ? 'green' : 'orange'}>
              {details?.state === 1 ? '开启' : '关闭'}
            </Tag>
            - 详情
          </>
        )
      }
      drawerProps={{
        destroyOnClose: true,
      }}
      trigger={<a>{name}</a>}
      onVisibleChange={(visible) => {
        if (visible) {
          getRecordDetails();
        } else {
          onRefurbish();
        }
      }}
      submitter={false}
      onFinish={async (values) => { }}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={details === undefined}
      >
        {details !== undefined && (
          <>
            <Typography.Title level={4} style={{ textAlign: 'left' }}>
              {details?.title}
            </Typography.Title>

            <Divider orientation="left" plain>
              来源
            </Divider>
            <Space>
              <Tag color={details.sourceTopName == "中央媒体" ? "red" : details.sourceTopName == "市/区县级媒体" ? "green" : "blue"} key={details?.sourceTopName}>{details?.sourceTopName}</Tag>
              <Space size={[8, 16]} wrap>
                {details?.sourceNames.map((item) => (
                  <Tag key={item}>{item}</Tag>
                ))}
              </Space>
            </Space>

            {access.宣传刊播x配置x管理员 && (
              <Descriptions
                style={{
                  marginTop: 18,
                }}
              >
                <Descriptions.Item label="积分">{details?.score}</Descriptions.Item>
              </Descriptions>
            )}
            <Divider orientation="left" plain>
              联动单位
            </Divider>
            <Space size={[8, 16]} wrap>
              {details?.participateOrganizationNames.map((item) => (
                <Tag key={item}>{item}</Tag>
              ))}
            </Space>
            <Divider orientation="left" plain>
              其他
            </Divider>
            <Descriptions>
              <Descriptions.Item label="发布日期">
                {moment(details?.publishTime).format('YYYY-MM-DD')}
              </Descriptions.Item>
              <Descriptions.Item label="创建时间">{details?.createdTime}</Descriptions.Item>
              <Descriptions.Item label="创建人">{details?.createdAccountName}</Descriptions.Item>
            </Descriptions>
            {details?.remarks != undefined && (
              <Descriptions>
                <Descriptions.Item span={3} label="备注">
                  {details?.remarks}
                </Descriptions.Item>
              </Descriptions>
            )}
            {details?.isFile === 1 && (
              <>
                <Divider orientation="left" plain>
                  附件
                </Divider>
                <ProList<PublicityRecordData.Attachment>
                  rowKey="id"
                  ghost
                  dataSource={details?.attachments}
                  showActions="hover"
                  metas={{
                    title: {
                      dataIndex: 'name',
                      render: (text, row, index, action) => {
                        return (
                          <>
                            {row.type === 1 ? (
                              <Space size={0}>
                                <Tag color="blue">文件</Tag>
                              </Space>
                            ) : row.type === 2 ? (
                              <Tag color="green">链接</Tag>
                            ) : (
                              <Tag color="geekblue">口令</Tag>
                            )}
                            <span
                              style={{
                                fontWeight: 'bold',
                              }}
                              onClick={() => {
                                window.open(row.path, '_blank');
                              }}
                            >
                              {row.name}
                            </span>
                          </>
                        );
                      },
                    },
                    description: {
                      render: (text, row, index, action) => {
                        return (
                          <Typography>
                            {
                              <Typography.Paragraph>
                                <blockquote>
                                  {row.type === 1 ? (
                                    <>
                                      {row.thumbUrl === null ? (
                                        <Avatar
                                          shape="square"
                                          size={64}
                                          onClick={() => {
                                            window.open(row.path, '_blank');
                                          }}
                                          icon={<FileOutlined />}
                                        />
                                      ) : (
                                        <Avatar shape="square" size={64} src={row.thumbUrl} />
                                      )}
                                    </>
                                  ) : row.type === 2 ? (
                                    row.link
                                  ) : (
                                    row.signal
                                  )}
                                </blockquote>
                              </Typography.Paragraph>
                            }
                          </Typography>
                        );
                      },
                    },
                    actions: {
                      render: (text, row, index, action) => [
                        row.type == 1 && (
                          <a
                            onClick={() => {
                              window.open(row.path, '_blank');
                            }}
                            key="link"
                          >
                            点击下载
                          </a>
                        ),
                      ],
                    },
                  }}
                />
              </>
            )}
          </>
        )}
      </Spin>
    </DrawerForm>
  );
};

export default DetailsRecord;
